<template>
  <van-row class="gl_py_20 individual_content">
    <van-col :span="16">
      <van-row class="gl_px_15">
        <van-col class="user_name gl_py_5" :span="24">
          <span class="name gl_mr_10">{{ individualInfo.name }}</span>
          <span class="gender">{{ individualInfo.genderCode === 'M' ? '男' : '' }}{{ individualInfo.genderCode === 'W' ? '女' : '' }}</span>
        </van-col>
        <van-col class="birth_date gl_pt_5" :span="24">{{ individualInfo.birthDate && individualInfo.birthDate.substring(0, 10) }}</van-col>
        <van-col :span="24">
          <template v-for="item in tagList">
            <van-tag :key="item.id" class="gl_mr_10 gl_mt_5" size="medium" plain :closeable="tagList.length > 1" type="primary" @close="deleteTag(item)">
              {{ item.registerTagType && item.registerTagType.name }}
            </van-tag>
          </template>
          <template v-if="dict.registerTagType && tagList.length < dict.registerTagType.length && currentUserType.registerId">
            <van-tag plain type="primary" size="medium" class="gl_px_5 gl_mt_5" @click="openChooseTagDialog"> + </van-tag>
          </template>
        </van-col>
      </van-row>
    </van-col>
    <van-col :span="8" align="center">
      <show-avatar
        :src="getStaticFileUrl(individualInfo.imagePath)"
        width="80px"
        height="80px"
        shape="circle"
        @click="$imagePreview([getStaticFileUrl(individualInfo.imagePath)])"
      />
    </van-col>
    <van-action-sheet v-model="chooseTagDialog" title="选择角色标签">
      <div class="tag_list">
        <van-checkbox-group v-model="modelLgType">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in registerTagTypeList"
              :key="item.code"
              clickable
              :title="item.value"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox ref="checkboxes" :name="item.code" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
      <div class="van-action-sheet__gap" />
      <van-button type="default" :loading="tagLoading" :hairline="true" block @click="submitTag">确定</van-button>
    </van-action-sheet>
  </van-row>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import {
  api_GET_EventsManagementRegisterId,
  api_GET_EventsManagementRegisterTag,
  api_DELETE_EventsManagementRegisterTagId,
  api_POST_EventsManagementRegisterTagTags
} from '@/extend/api/gameswaggerApi/app';
export default {
  data() {
    return {
      individualInfo: {},
      tagLoading: false,
      // 标签列表
      tagList: [],
      chooseTagDialog: false,
      modelLgType: [],
      // 角色不存在的标签
      registerTagTypeList: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    currentUserType: {
      handler(val) {
        if (!val) return;
        this.getIndividualInfo();
      }
    }
  },
  created() {
    this.getDict();
    if (this.currentUserType) {
      this.getIndividualInfo();
      this.getTagList();
    }
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取个人数据
    getIndividualInfo() {
      if (!this.currentUserType.registerId) return;
      api_GET_EventsManagementRegisterId(this.currentUserType.registerId).then(res => {
        this.individualInfo = res;
        this.$store.dispatch('user/getSaveCurrentUserIndInfo', res);
      }, error => {
        this.$toast.fail(`获取个人信息失败！${error.error.message}`);
      });
    },
    // 获取个人标签
    getTagList() {
      return new Promise((resolve, reject) => {
        api_GET_EventsManagementRegisterTag({ RegisterId: this.currentUserType.registerId, IncludeRegisterTagType: true }).then(res => {
          this.tagList = res.items || [];
          this.handleTagList(this.tagList);
        }, error => {
          this.$toast.fail(`获取个人标签失败！${error.error.message}`);
        });
      });
    },
    // 删除个人标签
    deleteTag(tag) {
      this.$dialog.confirm({
        title: '提示',
        message: `您确定要删除【${tag.registerTagType.name}】标签吗？`
      }).then(() => {
        api_DELETE_EventsManagementRegisterTagId(tag.id).then(() => {
          this.getTagList();
        }, error => {
          this.$toast.fail(`删除个人标签失败！${error.error.message}`);
        });
      });
    },
    openChooseTagDialog() {
      this.modelLgType = [];
      this.chooseTagDialog = true;
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    submitTag() {
      if (!this.modelLgType.length) {
        this.chooseTagDialog = false;
        return;
      }
      const tags = [];
      for (let i = 0; i < this.modelLgType.length; i++) {
        const item = {};
        item.registerTagTypeCode = this.modelLgType[i];
        item.registerId = this.currentUserType.registerId;
        tags.push(item);
      }
      this.addTag({ tags: tags }).then(() => {
        this.chooseTagDialog = false;
      });
    },
    // 新增个人标签
    addTag(registerTagsVO) {
      return new Promise((resolve, reject) => {
        this.tagLoading = true;
        api_POST_EventsManagementRegisterTagTags(registerTagsVO).then(res => {
          this.tagLoading = false;
          this.getTagList();
          resolve(res);
        }, error => {
          this.tagLoading = false;
          this.$toast.fail(`${error.error.message}`);
        });
      });
    },
    // 处理标签 - 添加name值
    handleTagList(tagList) {
      console.log(this.dict.registerTagType);
      this.registerTagTypeList = [];
      if (!this.dict.registerTagType || !tagList.length) {
        this.registerTagTypeList = this.dict.registerTagType;
        return;
      }
      for (let i = 0; i < this.dict.registerTagType.length; i++) {
        const item = this.dict.registerTagType[i];
        for (let j = 0; j < tagList.length; j++) {
          const jtem = tagList[j];
          if (item.code === jtem.registerTagTypeCode) break;
          // 没有添加的标签
          if (j === tagList.length - 1) {
            this.registerTagTypeList.push(item);
          }
        }
      }
      return this.registerTagTypeList;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>
<style>
.individual_content {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.individual_content::after {
  position: absolute;
  width: calc(100% - 30px);
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
.individual_content .user_name {
  font-size: 14px;
  color: #333;
}
.individual_content .birth_date {
  font-size: 12px;
  color: #666;
}
.tag_list {
  padding: 15px 15px 0;
}
</style>
